feat(metrics): Add drag-and-drop reordering to metric panels by nsdeschenes · Pull Request #112671 · getsentry/sentry

nsdeschenes · 2026-04-10T14:45:15Z

Users with multiple metric panels can now grab the drag handle in the toolbar and reorder panels. The new order is persisted to URL query params so it survives page reloads. During a drag, chart content is replaced with a lightweight placeholder to avoid expensive re-renders of ECharts instances.

Key details:

Drag handle is hidden when there's only one panel
Stable sortable keys handle duplicate queries and mid-list insertions
Keyboard and screen reader accessibility via dnd-kit sensors and forwarded ARIA attributes
useReorderMetricQueries hook encodes the reordered list back into URL params

Closes EXP-827

Example:

Screen.Recording.2026-04-10.at.11.58.27.mov

Add a hook that encodes a reordered list of metric queries into the URL query params and navigates, providing the foundation for drag-and-drop reordering of metric panels. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…olbar MetricPanel now accepts ref, style, dragListeners, and isAnyDragging props. When a drag is active, chart content is replaced with a placeholder to avoid expensive re-renders. MetricToolbar renders a DragReorderButton when drag listeners are provided. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add SortableMetricPanel wrapper using @dnd-kit/sortable and integrate DndContext into MetricsTabBodySection. Panels can now be reordered via drag-and-drop, with the new order persisted to URL query params. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Hide the drag reorder button and remove its grid column when there is only a single metric query, since reordering is not meaningful with one item. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

Forward dnd-kit aria attributes through MetricPanel to the DOM so keyboard and screen reader users can interact with sortable panels. Replace index-based uniqueId array with a Map keyed by encoded query params so deletions and mid-list insertions no longer desync React keys with their queries. Move offsetHeight measurement from the render body into a useLayoutEffect to avoid forced synchronous reflow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add dependency array to useLayoutEffect to avoid forcing layout reflow on every render. Include index in sortable key generation so duplicate metric queries get distinct stable IDs. Wrap sortableItems in useMemo so onDragEnd useCallback actually memoizes. Fix leading space in grid columns template when drag handle is absent. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Previously all panels displayed the placeholder text during drag. Now only the panel being actively dragged shows the message, while other panels show a blank placeholder to avoid chart rendering. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…component Replace useLayoutEffect height capture with a ref callback on the container, removing an extra ref and effect. Extract the drag placeholder into a DnDPlaceholder component for clarity. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

linear-code · 2026-04-10T14:45:20Z

EXP-827 Add drag-and-drop reordering to Metrics

static/app/views/explore/metrics/metricsTab.tsx

static/app/views/explore/metrics/metricPanel/index.tsx

…lines Front-load the informational content before the personality quip, per content & voice guidelines. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The sortable key included the array index, so every reorder changed moved items' keys, causing React to unmount and remount panels. This lost local state and forced full ECharts re-initialization — the exact cost the placeholder optimization was designed to avoid. Use occurrence count instead of index to disambiguate duplicate queries, keeping keys stable across reorders. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Move the sortable dnd hook out of metricsTab.tsx into a dedicated hooks file for better organization. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Show the Samples/Aggregates tab list with placeholder content on the table side during drag-and-drop reordering, giving a better visual indication of the panel layout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Wrap SideBySideOrientation in a React Activity so it stays mounted but hidden during drag-and-drop reordering. This prevents the table from refetching data when dragging ends. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace Map iterator .forEach() with for...of loop for broader JS engine compatibility. Simplify the DnD table placeholder to use a plain Placeholder instead of rendering MetricInfoTabList outside its required TabStateProvider context. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d5eb0ae. Configure here.}

static/app/views/explore/metrics/metricInfoTabs/index.tsx

MetricInfoTabList is only used internally within its module, so the export keyword is unnecessary. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

The tab list (Samples/Aggregates) should render before additionalActions in the Flex container so it appears on the left, with the PanelPositionSelector and HideContentButton on the right. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

…cemetrics-add-dnd-to-metrics-page # Conflicts: # static/app/views/explore/metrics/metricPanel/index.tsx # static/app/views/explore/metrics/metricToolbar/index.tsx # static/app/views/explore/metrics/metricsTab.tsx

Move stable label state alongside metric query reorder operations so drag-and-drop does not relabel toolbar badges by position. Add a regression test that verifies labels remain attached to query identity after reorder. Co-Authored-By: Codex <noreply@openai.com>

static/app/views/explore/metrics/metricsTab.tsx

narsaynorath · 2026-04-13T20:32:06Z

static/app/views/explore/metrics/multiMetricsQueryParams.spec.tsx

      expect(result.current[1]).toEqual(expect.objectContaining({label: 'ƒ1'}));
    });
+
+    it('keeps labels attached to query identity when reordering', () => {


static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx

narsaynorath · 2026-04-13T20:44:19Z

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx

+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {


Whoa, keyboard navigation for DnD is so cool.

Yeah!! I was impressed trying it out, they really nailed it. What a relief for accessibility too.

narsaynorath · 2026-04-13T21:15:32Z

Ah, one thing I noticed was, we tried to make inserts for metric queries add between aggregates and equations and it gets a little funky now that we can also rearrange functions. Is it possible to do something like.. If you haven't re-arranged them then they add between aggregates and equations, otherwise we can just append them to the bottom?

Not entirely sure what the best way to handle it is, but this seems reasonable. Open to suggestions on dealing with these! This doesn't need to block your PR though if you want to handle it separately

Replace the metrics drag-and-drop UUID bookkeeping with the stable query labels that now persist across query mutations. Keep the sortable panel IDs and React keys aligned with those labels, and add a focused hook test that covers duplicate-query reordering. Co-Authored-By: Codex <noreply@openai.com>

nsdeschenes · 2026-04-14T13:40:46Z

Ah, one thing I noticed was, we tried to make inserts for metric queries add between aggregates and equations and it gets a little funky now that we can also rearrange functions. Is it possible to do something like.. If you haven't re-arranged them then they add between aggregates and equations, otherwise we can just append them to the bottom?

Not entirely sure what the best way to handle it is, but this seems reasonable. Open to suggestions on dealing with these! This doesn't need to block your PR though if you want to handle it separately

I don't think this should be too hard, we just need to split up them into two DnD contexts', i'll take a stab at it here

Allow the sortable metrics hook to expose a filtered view while still reordering against the original query list. This keeps sectioned views stable and ignores drops that cross section boundaries. Co-Authored-By: Codex <noreply@openai.com>

Render aggregate queries and equations in their own sortable sections on the refreshed metrics tab. This keeps each panel group visually distinct while preserving the drag state needed for section-local reordering. Co-Authored-By: Codex <noreply@openai.com>

sentry · 2026-04-14T13:58:52Z

Sentry Snapshot Testing

Name	Added	Removed	Modified	Renamed	Unchanged	Status
sentry-frontend `sentry-frontend`	0	0	0	0	204	✅ Unchanged

static/app/views/explore/metrics/metricPanel/index.tsx

narsaynorath

🚀

nsdeschenes and others added 8 commits April 10, 2026 11:11

feat(metrics): Add useReorderMetricQueries hook

9390b81

Add a hook that encodes a reordered list of metric queries into the URL query params and navigates, providing the foundation for drag-and-drop reordering of metric panels. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat(metrics): Disable drag handle when only one metric panel

215e505

Hide the drag reorder button and remove its grid column when there is only a single metric query, since reordering is not meaningful with one item. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 10, 2026

vercel bot deployed to Preview April 10, 2026 14:46 View deployment

github-advanced-security AI found potential problems Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/metricsTab.tsx Fixed Show fixed Hide fixed

cursor bot reviewed Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/metricsTab.tsx Outdated Show resolved Hide resolved

static/app/views/explore/metrics/metricPanel/index.tsx Outdated Show resolved Hide resolved

nsdeschenes and others added 2 commits April 10, 2026 11:54

fix(metrics): Revise dnd placeholder copy to follow brand voice guide…

b33f0a6

…lines Front-load the informational content before the personality quip, per content & voice guidelines. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview April 10, 2026 14:59 View deployment

nsdeschenes and others added 2 commits April 10, 2026 12:02

ref(metrics): Extract useSortableMetricQueries hook into its own file

5ec4de6

Move the sortable dnd hook out of metricsTab.tsx into a dedicated hooks file for better organization. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

Just inline props

d8ec7f6

vercel bot deployed to Preview April 10, 2026 15:05 View deployment

nsdeschenes added 2 commits April 10, 2026 12:09

Tidy up sortable hook

6e06de4

Match padding sizes

9783f38

github-advanced-security AI found potential problems Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx Fixed Show fixed Hide fixed

nsdeschenes marked this pull request as ready for review April 10, 2026 15:14

nsdeschenes requested a review from a team as a code owner April 10, 2026 15:14

vercel bot deployed to Preview April 10, 2026 15:14 View deployment

sentry bot reviewed Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx Outdated Show resolved Hide resolved

cursor bot reviewed Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx Outdated Show resolved Hide resolved

github-advanced-security AI found potential problems Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx Fixed Show fixed Hide fixed

nsdeschenes added 2 commits April 10, 2026 13:47

Render placeholder chart and table during dnd reorder

542cacf

Fix dnd placeholder height to match measured content height

b95fdaa

nsdeschenes and others added 5 commits April 10, 2026 13:50

Use height prop

aaadf74

ref: Update DnD placeholder text to explain why charts are hidden

e204909

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview April 10, 2026 17:50 View deployment

cursor bot reviewed Apr 10, 2026

View reviewed changes

static/app/views/explore/metrics/metricInfoTabs/index.tsx Show resolved Hide resolved

nsdeschenes and others added 2 commits April 10, 2026 14:59

ref(metrics): Remove unused export from MetricInfoTabList

60a1e6c

MetricInfoTabList is only used internally within its module, so the export keyword is unnecessary. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>

vercel bot deployed to Preview April 10, 2026 18:03 View deployment

nsdeschenes and others added 2 commits April 13, 2026 15:11

vercel bot deployed to Preview April 13, 2026 18:20 View deployment

narsaynorath approved these changes Apr 13, 2026

View reviewed changes

nsdeschenes and others added 2 commits April 14, 2026 10:54

fix(metrics): Scope sortable metric reordering

67443d8

Allow the sortable metrics hook to expose a filtered view while still reordering against the original query list. This keeps sectioned views stable and ignores drops that cross section boundaries. Co-Authored-By: Codex <noreply@openai.com>

vercel bot deployed to Preview April 14, 2026 13:58 View deployment

sentry bot reviewed Apr 14, 2026

View reviewed changes

static/app/views/explore/metrics/metricPanel/index.tsx Show resolved Hide resolved

narsaynorath approved these changes Apr 14, 2026

View reviewed changes

nsdeschenes merged commit 66f191f into master Apr 14, 2026
65 checks passed

nsdeschenes deleted the nd/EXP-827/feat-tracemetrics-add-dnd-to-metrics-page branch April 14, 2026 15:35

Uh oh!

Conversation

nsdeschenes commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear-code bot commented Apr 10, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

narsaynorath Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

narsaynorath Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

JoshuaKGoldberg Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

narsaynorath commented Apr 13, 2026

Uh oh!

nsdeschenes commented Apr 14, 2026

Uh oh!

sentry bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sentry Snapshot Testing

Uh oh!

Uh oh!

narsaynorath left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nsdeschenes commented Apr 10, 2026 •

edited

Loading

sentry bot commented Apr 14, 2026 •

edited

Loading